87:I[903690,["/chat-static/_next/static/immutable/chunks/2bpf87rbgephw.js","/chat-static/_next/static/immutable/chunks/1_-3j8y-g-khs.js","/chat-static/_next/static/immutable/chunks/0-5txco-6137a.js","/chat-static/_next/static/immutable/chunks/37pfy9xa_-fym.js","/chat-static/_next/static/immutable/chunks/3x6gcbxpbz3iu.js","/chat-static/_next/static/immutable/chunks/0ym777lqvrt5s.js","/chat-static/_next/static/immutable/chunks/3_-rjhdsuis7n.js","/chat-static/_next/static/immutable/chunks/3drjbn90ue_90.js","/chat-static/_next/static/immutable/chunks/2c5x13d35htc2.js","/chat-static/_next/static/immutable/chunks/1-slcfp_1t3y8.js","/chat-static/_next/static/immutable/chunks/2pdd-s6iiekpm.js","/chat-static/_next/static/immutable/chunks/37vdsain5dj8e.js","/chat-static/_next/static/immutable/chunks/2revzn0ra78tw.js","/chat-static/_next/static/immutable/chunks/2laekvcp_uu57.js","/chat-static/_next/static/immutable/chunks/3m8rd7nedj7rn.js","/chat-static/_next/static/immutable/chunks/33h6grnh2bl_7.js","/chat-static/_next/static/immutable/chunks/2e28sx_kq80r2.js","/chat-static/_next/static/immutable/chunks/2h238qu78yrc7.js","/chat-static/_next/static/immutable/chunks/2x44da_dej4ip.js","/chat-static/_next/static/immutable/chunks/3aw1e92bm1ry7.js","/chat-static/_next/static/immutable/chunks/2awkorze7w85-.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0hw9f60f9oi4e.js","/chat-static/_next/static/immutable/chunks/41n8v3944kmub.js","/chat-static/_next/static/immutable/chunks/03h76be12-ovw.js","/chat-static/_next/static/immutable/chunks/1d_gyuid_v8gr.js","/chat-static/_next/static/immutable/chunks/0wldlvfpz1ovn.js","/chat-static/_next/static/immutable/chunks/35fjy1hhq-fzf.js","/chat-static/_next/static/immutable/chunks/32pgl19za38m-.js","/chat-static/_next/static/immutable/chunks/2u_pca60vbzcd.js","/chat-static/_next/static/immutable/chunks/284ke95_jw9k3.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3x8ujo6bvbukg.js","/chat-static/_next/static/immutable/chunks/1xgeqxjam9gsi.js","/chat-static/_next/static/immutable/chunks/268hvq-o4-o0_.js","/chat-static/_next/static/immutable/chunks/0he56tt3r9tt-.js","/chat-static/_next/static/immutable/chunks/2snwexdseoqo0.js","/chat-static/_next/static/immutable/chunks/311b_95qp5_x1.js","/chat-static/_next/static/immutable/chunks/0769yqw94cdbd.js","/chat-static/_next/static/immutable/chunks/1bviuhk6o2q_e.js","/chat-static/_next/static/immutable/chunks/0just8-1jum-f.js","/chat-static/_next/static/immutable/chunks/2aarfzkg_bqpv.js"],"ExplicitChatIdProvider"] 88:I[838238,["/chat-static/_next/static/immutable/chunks/2bpf87rbgephw.js","/chat-static/_next/static/immutable/chunks/1_-3j8y-g-khs.js","/chat-static/_next/static/immutable/chunks/0-5txco-6137a.js","/chat-static/_next/static/immutable/chunks/37pfy9xa_-fym.js","/chat-static/_next/static/immutable/chunks/3x6gcbxpbz3iu.js","/chat-static/_next/static/immutable/chunks/0ym777lqvrt5s.js","/chat-static/_next/static/immutable/chunks/3_-rjhdsuis7n.js","/chat-static/_next/static/immutable/chunks/3drjbn90ue_90.js","/chat-static/_next/static/immutable/chunks/2c5x13d35htc2.js","/chat-static/_next/static/immutable/chunks/1-slcfp_1t3y8.js","/chat-static/_next/static/immutable/chunks/2pdd-s6iiekpm.js","/chat-static/_next/static/immutable/chunks/37vdsain5dj8e.js","/chat-static/_next/static/immutable/chunks/2revzn0ra78tw.js","/chat-static/_next/static/immutable/chunks/2laekvcp_uu57.js","/chat-static/_next/static/immutable/chunks/3m8rd7nedj7rn.js","/chat-static/_next/static/immutable/chunks/33h6grnh2bl_7.js","/chat-static/_next/static/immutable/chunks/2e28sx_kq80r2.js","/chat-static/_next/static/immutable/chunks/2h238qu78yrc7.js","/chat-static/_next/static/immutable/chunks/2x44da_dej4ip.js","/chat-static/_next/static/immutable/chunks/3aw1e92bm1ry7.js","/chat-static/_next/static/immutable/chunks/2awkorze7w85-.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0hw9f60f9oi4e.js","/chat-static/_next/static/immutable/chunks/41n8v3944kmub.js","/chat-static/_next/static/immutable/chunks/03h76be12-ovw.js","/chat-static/_next/static/immutable/chunks/1d_gyuid_v8gr.js","/chat-static/_next/static/immutable/chunks/0wldlvfpz1ovn.js","/chat-static/_next/static/immutable/chunks/35fjy1hhq-fzf.js","/chat-static/_next/static/immutable/chunks/32pgl19za38m-.js","/chat-static/_next/static/immutable/chunks/2u_pca60vbzcd.js","/chat-static/_next/static/immutable/chunks/284ke95_jw9k3.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3x8ujo6bvbukg.js","/chat-static/_next/static/immutable/chunks/1xgeqxjam9gsi.js","/chat-static/_next/static/immutable/chunks/268hvq-o4-o0_.js","/chat-static/_next/static/immutable/chunks/0he56tt3r9tt-.js","/chat-static/_next/static/immutable/chunks/2snwexdseoqo0.js","/chat-static/_next/static/immutable/chunks/311b_95qp5_x1.js","/chat-static/_next/static/immutable/chunks/0769yqw94cdbd.js","/chat-static/_next/static/immutable/chunks/1bviuhk6o2q_e.js","/chat-static/_next/static/immutable/chunks/0just8-1jum-f.js","/chat-static/_next/static/immutable/chunks/2aarfzkg_bqpv.js"],"SWRDataProvider"] 89:T1082,[V0_FILE]typescriptreact:file="cuisine-selector.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Check } from 'lucide-react' const cuisines = [ "Mexican", "Italian", "Chinese", "Japanese", "Indian", "Greek", "French", "Spanish", "Turkish", "Lebanese", "Vietnamese", "Korean", "Argentinian", "Peruvian", "Ethiopian", "Nigerian", "German", "British", "Irish", "Swedish", "Danish", "Polish", "Hungarian", "Portuguese", ] const transitionProps = { type: "spring", stiffness: 500, damping: 30, mass: 0.5, } export default function CuisineSelector() { const [selected, setSelected] = useState([]) const toggleCuisine = (cuisine: string) => { setSelected((prev) => prev.includes(cuisine) ? prev.filter((c) => c !== cuisine) : [...prev, cuisine] ) } return (

What are your favorite cuisines?

{cuisines.map((cuisine) => { const isSelected = selected.includes(cuisine) return ( toggleCuisine(cuisine)} layout initial={false} animate={{ backgroundColor: isSelected ? "#2a1711" : "rgba(39, 39, 42, 0.5)", }} whileHover={{ backgroundColor: isSelected ? "#2a1711" : "rgba(39, 39, 42, 0.8)", }} whileTap={{ backgroundColor: isSelected ? "#1f1209" : "rgba(39, 39, 42, 0.9)", }} transition={{ type: "spring", stiffness: 500, damping: 30, mass: 0.5, backgroundColor: { duration: 0.1 }, }} className={` inline-flex items-center px-4 py-2 rounded-full text-base font-medium whitespace-nowrap overflow-hidden ring-1 ring-inset ${isSelected ? "text-[#ff9066] ring-[hsla(0,0%,100%,0.12)]" : "text-zinc-400 ring-[hsla(0,0%,100%,0.06)]"} `} > {cuisine} {isSelected && (

)} ) })}

) } 7d:["$","$L87",null,{"chatId":"3g3Z4cT4Uxj","children":["$","$L88",null,{"data":{"@\"active-block\",\"3g3Z4cT4Uxj\",":{"id":"xj6wKCr8Ays","messageId":"j3PklJxmI3rDhMWR0YIh4sdMpfb2Bla1","source":"$89","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"cuisine-selector","type":"code-project","project":"cuisine-selector"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"3g3Z4cT4Uxj\",":false,"":null},"children":"$L8a"}]}]

About

Tags

Share

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This